<template>
	<view>
		<u-swiper :list="navImgList"></u-swiper>
		<view class="u-p-20 u-flex eq-info">
			<view
				class="item-box"
				v-for="item in equipmentInfo.portList"
				:key="item"
				@click="changePortFunc(item)"
				:class="{
					'change-style': changeInfo.portCode === item.portCode,
					'free-style': item.portStatus === 0,
					'use-style': item.portStatus === 1,
					'disabled-style': item.portStatus === 2,
					'damage-style': item.portStatus === 3
				}"
			>
				{{ item.portCode }}
				<text class="u-font-22">{{ filterStatus(item.portStatus) }}</text>
			</view>
		</view>
		<view class="u-p-20">
			<view class="u-m-b-10 item-title u-flex  u-flex-between">
				<view class="u-font-26">
					设备编号:
					<text class="u-font-24">{{ equipmentId }}</text>
				</view>
				<view>
					<text class="u-font-24">端口:{{ changeInfo.portCode ? changeInfo.portCode + '号' : '未选择' }}</text>
				</view>
				<view>
					<text class="u-font-24">
						状态:
						<text class="u-font-22">{{ filterStatus(changeInfo.portStatus) }}</text>
					</text>
				</view>
			</view>
			<!-- 端口空闲状态显示的表单 -->
			<view v-show="[0, 1].includes(changeInfo.portStatus)">
				<u-cell title="充电开始时间" v-if="[1].includes(changeInfo.portStatus)" :value="changeInfo.startTime"></u-cell>
				<u-cell title="充电时长" @click="sheetShow = true" v-if="[0].includes(changeInfo.portStatus)" :isLink="true">
					<template #value>
						<view style="color: #f20;">{{ filterTime(changeTime) }}</view>
					</template>
				</u-cell>
				<u-cell title="充电桩名称" :value="equipmentInfo.eqName"></u-cell>
				<u-cell title="计费模式" value="计时收费"></u-cell>
				<u-cell title="账户余额" :value="rechargeFunc()" @click="jumpPage('/packMyself/myWallet/myWallet')" :isLink="true"></u-cell>
				<u-cell title="收费标准" value="点击查看" @click="closePopup" :isLink="true"></u-cell>
				<u-cell title="联系客服">
					<template #value>
						<view class="u-flex" @click="clickPhone(equipmentInfo.siteInfo.sitePhone)">
							{{ equipmentInfo.siteInfo.sitePhone }}
							<u-icon name="phone-fill" color="#2979ff"></u-icon>
						</view>
					</template>
				</u-cell>
			</view>
			<view v-show="[2, 3].includes(changeInfo.portStatus)">
				<u-cell title="该端口无法使用,请联系管理员"></u-cell>
				<u-cell title="联系电话">
					<template #value>
						<view class="u-flex" @click="clickPhone(equipmentInfo.siteInfo.sitePhone)">
							{{ equipmentInfo.siteInfo.sitePhone }}
							<u-icon name="phone-fill" color="#2979ff"></u-icon>
						</view>
					</template>
				</u-cell>
			</view>
		</view>
		<view v-show="changeInfo.portStatus === 0">
			<view style="height: 100rpx;"></view>
			<bottomBtn :loading="loading" title="立即充电" @change="requestSubscribeMessage" />
		</view>
		<!-- 选择时间的弹窗 -->
		<u-action-sheet
			@close="sheetShow = false"
			:actions="timeList"
			:title="title"
			cancelText="取消"
			:show="sheetShow"
			@select="changeTimeFunc"
			:closeOnClickOverlay="true"
			safeAreaInsetBottom
		></u-action-sheet>
		<!--  查看计算价格的弹窗 -->
		<u-popup :show="popupShow" mode="right" @close="closePopup">
			<template>
				<billing style="width: 80vw;" :value="equipmentInfo.billingScheme" />
			</template>
		</u-popup>
	</view>
</template>

<script>
import bottomBtn from '@/components/bottomBtn.vue';
import billing from './components/billing.vue';
const statusList = [{ status: 0, name: '空闲' }, { status: 1, name: '使用中' }, { status: 2, name: '禁用' }, { status: 3, name: '损坏' }];
export default {
	components: { bottomBtn, billing },
	data() {
		return {
			loading: false,
			statusList, // 状态列表
			// 选中的端口信息
			changeInfo: {},
			changeTime: 0,
			userInfo: this.$store.state.userInfo, // 用户详情
			popupShow: false, // 计费规则的弹窗
			sheetShow: false, // 选择时间的弹窗
			userInfoDe: {},
			// 充电的时间列表
			timeList: [
				{
					name: '充满自停',
					subname: '电池充满后会自动结算',
					id: 0
				},
				{
					name: '5分钟',
					id: 5
				},
				{
					name: '1小时',
					id: 60
				},
				{
					name: '3小时', //开启后文字不显示
					id: 180
				},
				{
					name: '5小时', //开启后文字不显示
					id: 300
				},
				{
					name: '10小时', //开启后文字不显示
					id: 600
				},
				{
					name: '15小时', //开启后文字不显示
					id: 900
				}
			],
			equipmentId: null, // 设备id
			timer: null, // 定时器
			equipmentInfo: {
				billingScheme: {} // 计费信息
			}, // 设备信息
			navImgList: ['https://cdn.uviewui.com/uview/swiper/swiper1.png']
		};
	},
	onLoad(option) {
		const { scene, id } = option;
		if (scene || id) {
			this.equipmentId = scene || id;
			this.initFunc();
		}
	},
	onShow() {
		this.getUserInfo();
	},
	// 清除定时器
	onUnload() {
		if (this.timer) {
			clearTimeout(this.timer);
			this.timer = null;
		}
	},
	methods: {
		// 跳转页面
		jumpPage(url) {
			uni.navigateTo({
				url
			});
		},
		// 授权消息通知
		requestSubscribeMessage() {
			uni.requestSubscribeMessage({
				tmplIds: ['THmD9Zq_a_7z83k8LqivVH9RM2sBl6J3z6vk-j4OHus','7bG9pslRpziIsYxj4JZrh3Txs4c7wIS3Yg5W4blQP7Y'],
				success: res => {
					this.chargeFunc();
				}
			});
		},
		// 计算账户余额
		rechargeFunc() {
			const { actualRecharge, giveRecharge } = this.userInfoDe;
			const recharge = (actualRecharge + giveRecharge).toFixed(2) || 0;
			return recharge + '元';
		},
		// 获取用户详情
		async getUserInfo() {
			const res = await this.$api.user.getUserOne({ id: this.userInfo.id });
			this.userInfoDe = res.data.userInfo;
		},
		// 初始函数
		initFunc() {
			this.getEquipmentInfo();
			this.timer = setInterval(() => {
				this.getEquipmentInfo();
			}, 2500);
		},
		// 获取设备信息 portId 传递端口号时 默认选择当前端口号
		async getEquipmentInfo(portCode) {
			const res = await this.$api.equipment.info({ id: this.equipmentId });
			if (res.code === 200) {
				this.equipmentInfo = res.data;
				res.data.portList.forEach(item => {
					if (item.portCode == portCode) this.changeInfo = item;
				});
			} else {
				// 返回错误时 关闭定时器
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
		// 过滤选择的时间
		filterTime(time) {
			const info = this.timeList.filter(item => item.id == time);
			return info[0].name;
		},
		// 选择时间
		changeTimeFunc(info) {
			this.changeTime = info.id;
		},
		// 充电
		async chargeFunc() {
			this.loading = true;
			const { eqId, portCode } = this.changeInfo;
			const res = await this.$api.equipment.start({ id: eqId, portCode, chargingMode: 1, time: this.changeTime }).finally(() => {
				this.loading = false;
			});
			if (res.code === 200) {
				this.$u.toast('充电成功');
				this.getEquipmentInfo(portCode);
			}
		},
		// 拨打电话
		clickPhone(phone) {
			if (!phone) return;
			uni.makePhoneCall({
				phoneNumber: phone
			});
		},
		// 过滤状态
		filterStatus(status) {
			const changelist = this.statusList.filter(item => status === item.status);
			return changelist.length > 0 ? changelist[0].name : '未知';
		},
		closePopup() {
			this.popupShow = !this.popupShow;
		},
		// 选择端口
		changePortFunc(item) {
			this.changeInfo = item;
		}
	}
};
</script>

<style lang="scss" scoped>
.eq-info {
	flex-wrap: wrap;
	.item-box {
		text-align: center;
		background: #f22;
		color: #fff;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 5px;
		width: calc(20% - 24rpx);
		margin: 15rpx 10rpx;
	}
	// 空闲的样式
	.free-style {
		background: #19be6b;
	}
	// 使用的样式
	.use-style {
		background: #ff9900;
	}
	// 禁用的样式
	.disabled-style {
		background: #909399;
	}
	// 损坏的样式
	.damage-style {
		background: #fa3534;
	}
	// 选择的样式
	.change-style {
		border: 2px #00000038 solid;
	}
}
</style>
